<template>
  <div class="shop-container">
    <!-- 抽屉式左侧菜单 -->
    <el-drawer
      v-model="drawerVisible"
      :with-header="false"
      :size="240"
      :before-close="handleClose"
      class="shop-drawer"
      :visible.sync="drawerVisible"
    >
      <el-menu
        :default-active="$route.path"
        mode="vertical"
        @select="handleNavSelect"
      >
        <el-menu-item index="/shop/products">
          <i class="iconfont icon-product"></i>
          <span>商品列表</span>
        </el-menu-item>
        <el-menu-item index="/shop/myaccount">
          <i class="iconfont icon-account"></i>
          <span>我的账户</span>
        </el-menu-item>
        <el-menu-item index="/shop/cart">
          <i class="iconfont icon-cart"></i>
          <span>购物车</span>
        </el-menu-item>
      </el-menu>
    </el-drawer>

    <!-- 主内容区域 -->
    <div class="main-content">
      <router-view />
    </div>

    <!-- 底部导航栏 -->
    <el-menu
      :default-active="$route.path"
      mode="horizontal"
      class="bottom-nav"
      @select="handleNavSelect"
    >
      <el-menu-item index="/">
        <i class="iconfont icon-shop"></i>
        <span>商城</span>
      </el-menu-item>
      <el-menu-item index="/edu">
        <i class="iconfont icon-edu"></i>
        <span>农教</span>
      </el-menu-item>
      <el-menu-item index="/community">
        <i class="iconfont icon-community"></i>
        <span>社区</span>
      </el-menu-item>
    </el-menu>

    <!-- 移动端触发按钮 -->
    <el-button
      type="primary"
      icon="el-icon-menu"
      class="menu-trigger"
      @click="drawerVisible = true"
    ></el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const drawerVisible = ref(true) // 默认展开

const handleNavSelect = (key: string) => {
  router.push(key).catch(err => {
    if (!err.message.includes('Avoided redundant navigation')) throw err
  })
  if (drawerVisible.value) {
    drawerVisible.value = false
  }
}

const handleClose = () => {
  drawerVisible.value = false
}

// 监听路由变化自动关闭抽屉
watch(
  () => router.currentRoute.value.path,
  () => {
    drawerVisible.value = false
  }
)
</script>

<style scoped>
.shop-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

.shop-drawer {
  transition: all 0.3s ease;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  z-index: 1000; /* 确保高于其他元素 */
}

.main-content {
  flex: 1;
  padding: 20px;
  transition: margin-left 0.3s ease, padding-bottom 0.3s ease;
  min-height: calc(100vh - 160px); /* 减去底部导航栏高度 */
  padding-bottom: 80px; /* 为底部导航预留空间 */
}

.drawer-open + .main-content {
  margin-left: 240px !important;
}

/* 底部导航栏固定定位 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001; /* 确保最高层级 */
  background: #fff !important;
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  padding: 10px 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .menu-trigger {
    display: block;
  }
  
  .main-content {
    margin-left: 0 !important;
    padding-bottom: 120px !important;
  }
  
  .bottom-nav {
    height: 60px !important;
  }
}
</style>